<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="description" content="A short description of your company">
<meta name="keywords" content="Some keywords that best describe your business">
<title>Cloud Host - Shortcodes Charts</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic|Cutive' rel='stylesheet' type='text/css'>
<link href="style.css" media="screen" rel="stylesheet" type="text/css">

<!-- main-js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/general.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--/ main-js -->

<!-- shortcode: Tabs -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!-- shortcode: Slides images/text -->
<script type="text/javascript" language="javascript" src="js/slides.min.jquery.js"></script>
<!-- shortcode: Lightbox prettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<!-- SyntaxHighlighter for shortcodes -->
<script type="text/javascript" language="javascript" src="js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="js/shBrushPlain.js"></script>
<link href="css/shCore.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" media="screen" rel="stylesheet" type="text/css" />

<!-- custom CSS -->
<link href="custom.css" media="screen" rel="stylesheet" type="text/css">

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="body_wrap">

<div class="header header_top">
	<div class="container_12">
    	
        <div class="logo">
	        <a href="index.html"><img src="images/logo.png" alt=""></a>
            <strong><span></span>CLOUDHOST</strong>
        </div>
        
		<div class="topmenu">            
	            <ul class="dropdown">
	                <li class="menu-item-home"><a href="index.html"><span>Home</span></a></li>
	                <li><a href="solutions.html"><span>Solutions</span></a></li>
                    <li><a href="pricing.html"><span>Plans & Pricing</span></a></li>
	                <li class="current-menu-ancestor"><a href="#"><span>Pages</span></a>
	                	<ul>
	                    	<li><a href="blog.html"><span>Blog - Sidebar Right</span></a></li>
	                    	<li><a href="blog-sidebar-l.html"><span>Blog - Sidebar Left</span></a></li>
	                        <li class="current-menu-ancestor"><a href="#"><span>Shortcodes</span></a>
	                            <ul>                                
	                                <li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                                <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
	                                <li><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
	                                <li class="current-menu-item"><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
	                                <li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
	                                <li><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
	                                <li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
	                                <li><a href="shortcodes-media.html"><span>Media (Videos & Img)</span></a></li>
	                                <li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
	                                <li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
	                                <li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
	                            </ul>
	                        </li>
	                        <li><a href="about.html"><span>About us</span></a></li>
	                    </ul>
	                </li>
	                <li><a href="support.html"><span>Support</span></a></li>                          
	                <li><a href="contact.html"><span>Contact</span></a></li>
	            </ul>                
		</div>
        <!--/ topmenu -->
            
    </div>
</div>

<div class="header header_thin">
	<div class="container_12">    
		<div class="breadcrumbs"><a href="index.html">Homepage</a> <span class="separator">&nbsp;</span> <a href="#">Pages</a> <span class="separator">&nbsp;</span> <a href="#">Shortcodes</a> <span class="separator">&nbsp;</span> Charts</div>
    </div>
</div>
<!--/ header -->

<div class="middle cols2">
<div class="container_12">

<!-- content -->
    <div class="content">
    
    		<div class="post-item post-detail">
            		
                    <script type="text/javascript">
					SyntaxHighlighter.defaults['gutter'] = false;
					SyntaxHighlighter.defaults['toolbar'] = true;		
					SyntaxHighlighter.all();
					</script>    
                    
                    <div class="post-title">
                        <h1>Shortcodes: Charts</h1>
                    </div>                            
                    
					<div class="entry">
                    <p>The Google Charts API is the easiest way to create dynamic charts online and our Shortcodes for Charts are based on Google Chart API.</p>
	                    <h2>Chart type: <span>3D round pie</span></h2>
                    	<p><img src="http://chart.apis.google.com/chart?cht=p3&amp;chtt=The%20most%20popularity%20internet%20browser&amp;chl=Internet%20Explorer|Firefox|Safari|Chrome|Others&amp;chco=ff9900,e40b0b,1b9a1b,3399cc,bbcced&amp;chs=575x250&amp;chd=t:40,25,5,25,5&amp;chf=bg,s,ff9900,e40b0b,1b9a1b,3399cc,bbcced" alt="The most popularity internet browser"></p>

<pre class="brush: plain">
[chart width="720" height="300" type="3dpie" title="The most popularity internet browser" data="40,25,5,25,5" label="Internet Explorer|Firefox|Safari|Chrome|Others" colors="ff9900,e40b0b,1b9a1b,3399cc,bbcced"]
</pre>

<h2>Chart type: <span>2D round pie</span></h2>
<p><img src="http://chart.apis.google.com/chart?cht=p&amp;chtt=The%20most%20popularity%20internet%20browser&amp;chl=Internet%20Explorer|Firefox|Safari|Chrome|Others&amp;chco=ff9900,e40b0b,1b9a1b,3399cc,bbcced&amp;chs=575x250&amp;chd=t:40,25,5,25,5&amp;chf=bg,s,ff9900,e40b0b,1b9a1b,3399cc,bbcced" alt="The most popularity internet browser"></p>

<pre class="brush: plain">
[chart width="540" height="250" type="pie" title="The most popularity internet browser" data="40,25,5,25,5" label="Internet Explorer|Firefox|Safari|Chrome|Others" colors="ff9900,e40b0b,1b9a1b,3399cc,bbcced"]</pre>


<h2>Chart type: <span>Line Chart</span></h2>
<p><img src="http://chart.apis.google.com/chart?cht=lc&amp;chtt=Monthly%20sales%20growth&amp;chl=Mar.|Apr.|May|Jun.|Jul.&amp;chco=FF9900&amp;chs=575x250&amp;chd=t:40,25,5,25,5&amp;chf=bg,s,FFFFFF" alt="Monthly sales growth"></p>

<pre class="brush: plain">
[chart width="720" height="250" type="bar" title="Monthly sales growth" data="50,60,100,20,25" label="Mar.|Apr.|May|Jun.|Jul." colors="FF9900"]
</pre>

<h2>Chart type: <span>Bar Chart</span></h2>
<p><img src="http://chart.apis.google.com/chart?cht=bvg&amp;chtt=Monthly%20sales%20growth&amp;chl=Jan.|Feb.|Mar.|Apr.|May|Jun.&amp;chco=FF9900,e40b0b,3399cc&amp;chs=540x250&amp;chd=t:30,30,30,30,30,30|50,50,50,50,50,50|100,100,100,100,100,100&amp;chf=bg,s,FF9900,e40b0b,3399cc" alt="Monthly sales growth"></p>
<div class="divider_thin"></div>
<pre class="brush: plain">[chart width="540" height="250" type="bar" title="Monthly sales growth" data="30,30,30,30,30,30|50,50,50,50,50,50|100,100,100,100,100,100" label="Jan.|Feb.|Mar.|Apr.|May|Jun." colors="FF9900,e40b0b,3399cc"]
</pre>
                        
                      <div class="clear"></div>     
                  	</div>       
			</div>
            <!--/ post item -->
                        
            
            
                        
        
	</div>
<!--/ content --> 

<!-- sidebar -->
	<div class="sidebar">
    	
        <div class="sidebar_inner">
        	
            <!-- search widget -->
			<div class="widget-container widget_search">
                            <form method="get" id="searchform" action="#">
                                <div>
                                  <label class="screen-reader-text" for="s">Search for:</label>
                                    <input class="input_search" name="s" id="s" value="Search this blog" onfocus="if (this.value == 'Search this blog') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this blog';}" type="text" />
                                    <input id="searchsubmit" class="btn-submit" value="Submit" type="submit" />
                                </div>
                            </form>
			</div> 
			<!--/ search widget -->
            
            <div class="widget-container widget_categories">
	            	<h3 class="widget-title">Shortcodes Categories</h3>
	                    <ul>
                       		<li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                        <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
							<li><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
							<li class="current-menu-item"><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
							<li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
							<li><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
							<li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
							<li><a href="shortcodes-media.html"><span>Media (Videos & Images)</span></a></li>
							<li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
							<li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
							<li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
                    	</ul>
                        
			</div> 
             
            
            
            
        </div>		
        <div class="sidebar_bottom"></div> 
    </div>
<!--/ sidebar -->

	<div class="clear"></div>  
</div>
</div>
<!--/ middle -->

<div class="footer">
	<div class="container_12">
    
    	<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">OUR HOSTING</h3>
                    <ul>
                        <li><a href="#"><span>Website Hosting</span></a></li>                            
                        <li><a href="#"><span>Reseller Hosting</span></a></li>                        	
                        <li><a href="#"><span>Cloud Servers</span></a></li>  
                        <li><a href="#"><span>Site Supercharge</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 1 -->
		<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">AFFILIATES</h3>
                    <ul>
                        <li><a href="#"><span>Hosting Affiliates</span></a></li>                            
                        <li><a href="#"><span>Affiliate Banners</span></a></li>                        	
                        <li><a href="#"><span>Affiliate Login</span></a></li>  
                        <li><a href="#"><span>Affiliate Sign-up</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 2 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">SUPPORT</h3>
                    <ul>
                        <li><a href="#"><span>Knowledgebase</span></a></li>                            
                        <li><a href="#"><span>Community Forum</span></a></li>                        	
                        <li><a href="#"><span>Video Tutorials</span></a></li>  
                        <li><a href="#"><span>Contact Live Support</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 3 -->   
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">ABOUT US</h3>
                    <ul>
                        <li><a href="#"><span>About Cloud-Host</span></a></li>                            
                        <li><a href="#"><span>Our Team</span></a></li>
                        <li><a href="#"><span>In the Press</span></a></li>  
                        <li><a href="#"><span>Contact us directly</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">CAREERS</h3>
                    <ul>
                        <li><a href="#"><span>Join our team</span></a></li>
                        <li><a href="#"><span>Job Offerings Board</span></a></li>
                        <li><a href="#"><span>Send your Resume</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 -->  
        <div class="grid_2">
        		<!-- widget contacts -->
                    <div class="widget-container widget_contact">                    
                    	<h3>OUR ADDRESS</h3>
						<div class="contact-address">
                            <div class="address">Rue Teissere, #.24 0600 <br /> Cannes, France</div>
                            <div class="phone">Phone: <strong>+33(0)9399 7987</strong></div>
                            <div class="fax">Fax: <strong>+33(0)9399 7988</strong></div>
                        </div>                            
                    </div>
				<!--/ widget contacts --> 
        </div>
        <!--/ footer col 4 -->
    	
    	<div class="divider"></div>
	    	
    	<div class="footer_support">
	        <div class="icon_write_mail"><a href="#">Write us an Email</a></div>
	        <div class="icon_live_chat"><a href="#">Live Chat 24 / 7</a></div>
	        <div class="icon_phone">Support: +33 (0) 9399 7987</div>
            <div class="clear"></div>
        </div>  
    
	    <div class="copyright">
	        <p>&copy; Copyright 2013  |   Hosting Co. All rights reserved.</p>
		</div>
    
    	<div class="clear"></div>
        
    </div>
</div>

</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
